<template>
    <div>
        <div class="comment">
            <el-button @click="commentDialogShow('1')" style="margin: 23px 0">直接评论</el-button>
            <div class="comment-parent" v-for="(parent,pIndex) in commentData" :key="JSON.stringify(parent)+pIndex">
                <div class="comment-parent-item">
                    <el-row>
                        <el-col :span="3">
                            <img style="width: 30px; height: 30px;border-radius: 50%" :src="parent.avatar" alt=""/>
                        </el-col>
                        <el-col :span="5">
                            用户名：{{parent.nickName}}
                        </el-col>
                        <el-col :span="6">
                            时间：{{parent.createTime | formatTime }}
                        </el-col>
                        <el-col :span="5">
                            点赞：{{parent.praise}}
                        </el-col>
                        <el-col :span="5" style="text-align: right">
                            <el-button @click="commentDialogShow('2',parent)">回复</el-button>
                            <el-button type="danger" @click="handleDeleteDialogVisible(1, parent,'',pIndex)">删除</el-button>
                        </el-col>
                    </el-row>
                    <div class="comment-content">
                        <p>{{parent.content.text}}</p>
                        <div class="comment-images" v-if="parent.content.images && parent.content.images.length">
                            <div v-for="(imgUrl,iIndex) in parent.content.images" :key="imgUrl+iIndex"  :style="{'background-image':'url('+imgUrl+')'}" @click.stop="handleMagnifyingImg(imgUrl)"></div>
                        </div>
                        <div class="comment-video">
                            <!-- <div v-for="vItem in parent.content.video" :key="JSON.stringify(vItem)"> -->
                                
                                <div v-if="parent.content.video">
                                    <video  :src="parent.content.video.url" 
                                        :poster="parent.content.video.image" 
                                        controls
                                        preload="auto"></video>
                                </div>
                            <!-- </div> -->
                        </div>
                    </div>
                </div>
                <div class="comment-child" v-if="parent.comment && parent.comment.length">
                    <div class="comment-child-item" v-for="(child,cIndex) in parent.comment" :key="JSON.stringify(child)+cIndex">
                        <el-row>
                            <el-col :span="4">
                                <img style="width: 30px; height: 30px;border-radius: 50%" :src="child.fromAvatar" alt=""/>
                            </el-col>
                            <el-col :span="5">
                                用户名：{{child.fromName}}
                            </el-col>
                            <el-col :span="5">
                                时间：{{child.createTime | formatTime}}
                            </el-col>
                            <el-col :span="5">
                                点赞：{{child.praise}}
                            </el-col>
                            <el-col :span="5" style="text-align: right">
                                <el-button @click="commentDialogShow('3',child)">回复</el-button>
                                <el-button type="danger" @click="handleDeleteDialogVisible(2, parent, child, pIndex, cIndex)">删除</el-button>
                            </el-col>
                        </el-row>
                        <div class="comment-content">
                            <p> {{child.replyType === 3 ? '回复@': ''}} <span v-if="child.replyType === 3" style="color: #409EFF;">{{child.toName}}:</span> {{child.content.text}}</p>
                            <div class="comment-images" v-if="child.content.images && child.content.images.length">
                                <div v-for="(imgUrl,iIndex) in child.content.images" :key="imgUrl+iIndex" :style="{'background-image':'url('+imgUrl+')'}" @click.stop="handleMagnifyingImg(imgUrl)"></div>
                            </div>
                            <div class="comment-video">
                                <div v-for="vItem in child.content.video" :key="JSON.stringify(vItem)">
                                    <video  :src="vItem.url" 
                                            :poster="vItem.content" 
                                            controls
                                            preload="auto"></video>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- <span class="more-load"><el-button type="text" @click="acquireMoreChildComment(parent, pIndex)">加载更多回复评论 <i class="el-icon-d-arrow-right el-icon-right"></i></el-button></span> -->
                </div>
            </div>
            <div class="block" style="text-align: right;margin-top: 23px">
                    <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="parentCurrentPage"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="commentTotal">
                    </el-pagination>
            </div>
            <!-- <div class="more-load"><el-button type="text" @click="acquireComment()">加载更多评论 <i class="el-icon-d-arrow-right el-icon-right"></i></el-button></div> -->
        </div>
        <el-dialog
            title="图片"
            :visible.sync="magnifyingImgVisible"
            :append-to-body="true"
            width="80%">
            <div>
                <img :src="magnifyingImg" style="width: 100%">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="magnifyingImgVisible = false">确 定</el-button>
            </span>
        </el-dialog>
         <el-dialog
            title="提示"
            :close-on-click-modal="false"
            :visible.sync="deleteDialogVisible"
            :append-to-body="true"
            width="30%">
            <div>
                <p style="margin-bottom: 30px;">
                    <el-alert
                        title="填写删除理由"
                        type="error"
                        :closable="false"
                        show-icon>
                    </el-alert>
                </p>
                <el-input v-model="deleteDescribe" placeholder="请输入内容"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmDeleteComment()">确 定</el-button>
            </span>
        </el-dialog>
         <el-dialog
            title="提示"
            :close-on-click-modal="false"
            :visible.sync="commentDialogVisible"
            :append-to-body="true"
            width="30%">
            <div>
                <el-input v-model="commentValue" placeholder="请输入内容"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="commentDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commentConfirmIssue()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            title="选择教师点评"
            :close-on-click-modal="false"
            :visible.sync="teachVisible"
            :append-to-body="true"
            width="300px">
            <div>
                <el-select v-model="teachValue" placeholder="请选择">
                    <el-option
                        v-for="(item,index) in teachList"
                        :key="String(item) + index"
                        :label="item.nickName"
                        :value="item.user_id">
                    </el-option>
                </el-select>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="teachVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForumComment()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>

import {
    obtainComment,
    obtainMoreChildComment,
    deleteComment,
    obtainTeachList,
    appendCommentToGather
} from "@/config/api";
import { dateRegExp } from "@/config/filter";
export default {
    data () {
        return {
            parentCurrentPage: 1,
            childCurrentPage: 2,
            // 评价数据
            commentData: [],

            // 被放大的图片
            magnifyingImg: '',
            // 图片放大器
            magnifyingImgVisible:false,

            // 删除 对话框
            deleteDialogVisible: false,
            // 填写删除理由
            deleteDescribe: '',

            // 临时保存某条 父评论
            temporaryParentData: '',
            // 临时保存某条 子评论
            temporaryChildData: '',
            // 当前点击 父评论的那条
            parentIndex: '',
            // 当前点击 子评论的那条
            childIndex: '',

            // 1 删除父评论 2删除子评论
            deleteType: '',

            // 父评论总数
            commentTotal: 0,

            teachValue: '',
            // 教师列表
            teachList: [],
            // 老师列表弹窗
            teachVisible: false,

            // 评论
            commentDialogVisible: false,
            commentHold: {},
            commentReplyType: '',
            commentValue: '',
            categoryName: {},
            // categoryName = {
            //   // 评论目标 1作业 2社区
            //   commentTarget: null,
            //   // 评论类型  1评论主评论  2回复评论  3回复回复
            //   commentType: '3',
            //   forumId: null,
            //   jobId: null,
            //   parentId: comment.parentId,
            //   childReply: comment.childId,
            //   fromId: userId,
            //   toName: comment.fromName,
            //   toUid: comment.fromId,
            //   dialogueSource: comment.dialogueSource ? comment.dialogueSource : comment.childId
            // }
        }
    },
     filters: {
        formatTime(time) {
            return dateRegExp(time - 0, "yyyy-MM-dd hh:mm:ss");
        }
    },
    watch: {
      // 深度监听
      'forumId': {
        handler(val){
            this.parentCurrentPage = 1;
            this.commentData = [];
            this.acquireComment();
        },
        deep:true
      },
    },
    props: ['commentType', 'forumId'],
    mounted () {
        this.commentData = [];
        this.acquireComment();
    },
    methods: {
        // 获取评论列表
        async acquireComment () {
            const page = this.parentCurrentPage;
            const res = await obtainComment(this.forumId,page);
            if (res.status === 200) {
                if (res.data.length) {
                    //  this.parentCurrentPage ++;
                }
                this.commentData = res.data;
                this.commentTotal = res.total;
                // for (let i = 0; i < this.commentData.length; i++) {
                //     if ( typeof this.commentData[i]['currentChildCommentPage'] != 'number') {
                //         this.commentData[i]['currentChildCommentPage'] = 2;
                //     }
                // }
            }
        },
        // 放大图片观看
        handleMagnifyingImg (img) {
            this.magnifyingImgVisible = true;
            this.magnifyingImg = img;
        },
        // 获取更多子评论
        async acquireMoreChildComment (parent, index) {
            const parentId = parent.parentId;
            const page = this.commentData[index]['currentChildCommentPage'];
            const res = await obtainMoreChildComment(parentId,'',page);
            if (res.status === 200) {
                if (res.data.length) {
                    this.commentData[index]['currentChildCommentPage']++;
                }
                this.commentData[index].comment = [...this.commentData[index].comment, ...res.data];
            };
        },
        // 删除 触发对话框
        handleDeleteDialogVisible (deleteType, parent,child,parentIndex,childIndex) {
            this.deleteType = deleteType;
            this.parentIndex = parentIndex;
            this.childIndex = childIndex;
            this.temporaryParentData = parent;
            this.temporaryChildData = child;
            this.deleteDialogVisible = true;
            this.deleteDescribe = '';
        },
        // 确定 删除评论
        async confirmDeleteComment () {
            console.log(this.deleteType)
            const describe = this.deleteDescribe;
            if (!describe) {
                this.$message({
                    message: '请填入删除内容',
                    type: 'error'
                });
                return false;
            }
            if (this.deleteType === 1) {
                 // deleteType 1 删除父评论 2删除子评论

                const parentId =  this.temporaryParentData.parentId;
                const res = await deleteComment(parentId,'',describe)
                if (res.status === 200) {
                    this.commentData.splice(this.parentIndex,1);
                    this.deleteDialogVisible = false;
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }
            } else if (this.deleteType === 2) {
                const childId =  this.temporaryChildData.childId;
                const res = await deleteComment('',childId,describe)
                if (res.status === 200) {
                    this.commentData[this.parentIndex].comment.splice(this.childIndex,1);
                    this.deleteDialogVisible = false;
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }
            }
        },
        // 页码改变时
        handleCurrentChange (val) {
            this.parentCurrentPage = val;
            this.acquireComment()
        },
        // 评论的对话框显示
        commentDialogShow (type, comment) {
            if (type === '2' || type === '3' ) {
                this.commentHold = comment;
            };
            this.commentDialogVisible = true;
            this.commentValue = '';
            this.commentReplyType = type;
            this.teachValue = '';
            // commentHold: {},
            // commentType: '',
            // commentValue: '',
            // categoryName: {},
        },
        // 评论确认发布
        commentConfirmIssue () {
            if (!this.commentValue) return false;
            this.selectTeachShow();
            // let categoryName = {
            //     // 评论目标 1作业 2社区
            //     commentTarget: '2',
            //     // 评论类型  1评论主评论  2回复评论  3回复回复
            //     commentType:  this.commentType,
            //     forumId: this.forumId,
            //     jobId: null,
            //     parentId: comment.parentId,
            //     childReply: null,
            //     fromId: userId,
            //     toName: comment.fromName,
            //     toUid: comment.fromId,
            // }
        },
        // 获取此批次下的教师
        async selectTeachShow () {
            try {
                this.teachValue = '';
                let teach =  await obtainTeachList()
                this.teachVisible = true;
                this.teachList = teach.data;
            } catch (e) {
                console.error(e)
            }
        },
        // 提交评论评论
        async submitForumComment () {
            let categoryName = {};
            if (this.commentReplyType === '1') {
                categoryName = {
                    // 评论目标 1作业 2社区 
                    commentTarget: '2',
                    // 评论类型  1评论主评论  2回复评论  3回复回复
                    commentType: '1',
                    forumId: this.forumId || null,
                    jobId: null,
                    parentId: null,
                    childReply: null,
                    fromId: this.teachValue,
                    toName: '',
                    toUid: '',
                }
            } else if (this.commentReplyType === '2') {
                categoryName = {
                    commentTarget: '2',
                    commentType: '2',
                    forumId: this.forumId,
                    jobId: null,
                    parentId:this.commentHold.parentId,
                    childReply: null,
                    fromId: this.teachValue,
                    toName: this.commentHold.nickName,
                    toUid: this.commentHold.userId,
                }
            } else if (this.commentReplyType === '3') {
                categoryName = {
                    commentTarget: '2',
                    // 评论类型  1评论主评论  2回复评论  3回复回复
                    commentType: '3',
                    forumId: null,
                    jobId: null,
                    parentId: this.commentHold.parentId,
                    childReply: this.commentHold.childId,
                    fromId: this.teachValue,
                    toName: this.commentHold.fromName,
                    toUid: this.commentHold.fromId,
                    dialogueSource: this.commentHold.dialogueSource ? this.commentHold.dialogueSource : this.commentHold.childId
                }
            }
            categoryName = Object.assign({},categoryName,{
                commentText: this.commentValue,
                multimediaType: '0',
                // unionId: this.teachValue.union_id,
                userId:  this.teachValue,
            })
            const res = await appendCommentToGather(JSON.stringify(categoryName))
            if (res.status === 200) {
                this.commentValue = '';
                this.commentReplyType = '';
                this.teachValue = '';
                this.commentDialogVisible = false,
                this.teachVisible = false;
                this.acquireComment();
                this.$message({
                    message: '评论成功',
                    type: 'success'
                });
            } else {
                 this.$message({
                    message: '评论失败',
                    type: 'error'
                });
            }
        }
    }
}
</script>
<style lang="less" scoped>
.comment {
    .more-load {
        text-align: right;
    }
    .comment-content {
        .comment-images {
            > div {
                display: inline-block;
                margin-right: 15px;
                background-repeat: no-repeat;
                background-position: center center;
                background-size: cover;
                width: 80px;
                height: 80px;
                cursor: pointer;
            }
        }
        .comment-video {
            > div {
                margin-right: 15px;
                display: inline-block;
                width: 300px;
                height: 150px;
                video {
                    width: 300px;
                    height: 150px;
                }
            }
        }
    }
    .comment-parent {
        background: #e0e0e0;
        padding: 5px;
        // border-radius: 5px;
        border-bottom: 1px solid #000;
        .comment-child {
            padding-left: 50px;
            .comment-child-item {
                border-bottom: 1px solid #e0e0e0;
                padding-bottom: 10px;
                padding: 5px;
                background-color: #f0f0f0;
                &:last-of-type {
                    border-bottom: none;
                }
            }
            .more-load {
                background-color: #f0f0f0;
                display: block;
            }
        }
    }
}
</style>

